<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>详情</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 引入 Bootstrap -->
<link href="./css/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="./js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript">
	$(function() {
		
		initInfo();

	});

	function initInfo() {
		var templateHtml = $("#panelTemplate").html();
		var journalId = $("#journalId").val();
		var journalHtml = '';
		var journalDetailHtml = '';
		sessionStorage.setItem("journalType",$("#journalType").val());
		$.ajax({
			type : "POST",
			url : "findJournalByIdJson",
			dataType : "json",
			data : {
				"id" : journalId
			},
			success : function(data) {
				var journal = data.journal;
				var journalDetails = data.journalDetails;
				var tmpHtml = templateHtml;
				tmpHtml = tmpHtml.replace("journal_title", journal.title);
				tmpHtml = tmpHtml.replace("journal_content", journal.content);
				$.each(journalDetails, function(i, item) {
					journalDetailHtml += '<div class="well">' + item.content + '</div>';
				});
				tmpHtml = tmpHtml.replace("journalDetail_content",
						journalDetailHtml);
				$("#content").html(tmpHtml);

			}
		});

	}
</script>
</head>

<body>
	<div id="box" style="width: 90%; margin: 0 auto;">
		<div id="content"></div>
	</div>

	<div id="panelTemplate" style="display: none;">
		<div class="panel panel-primary">
			<div class="panel-heading">
				<h3 class="panel-title">journal_title</h3>
			</div>
			<div class="panel-body">journal_content</div>
			<div id="journalDetailDiv">journalDetail_content</div>
		</div>
	</div>
	<input type="hidden" id="journalId" value="${id}" ></input>
	<input type="hidden" id="journalType" value="${journalType}" ></input>
	
</body>

</html>